<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视差效果</title>
    <style>
          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
          }

          .full {
              width: 100%;
              height: 100vh;
              display: flex;
              align-items: center;
              justify-content: center;
              object-fit: cover;
          }

          .bim-fill{
      width: 100%;
      height: 100%;
      background-color:  rgb(21,21,21);
      overflow: hidden;
      perspective: 1000px;
      display: flex;
      align-items: center;
      justify-content: center;
      }

          .bim-overflow {
              width: 60%;
              height: 550px;
              position: relative;
              overflow: hidden;
              perspective: 1000px;
              display: flex;
              align-items: center;
              justify-content: center;
              transform-origin: 50% 50%;
          }

          .view-port {
              width: 120vw;
              height: 120vh;
              -webkit-align-content: center;
              display: flex;
              border:1px solid #ffffff;
              flex-wrap: wrap;
              justify-content: center;
              align-items: center;
              transform-style: preserve-3d;
              will-change: transform;
              transform:translate3d(-0.128px, 0.1664px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
          }

          .bim-card {
              width: 260px;
              height: 325px;
              margin: 15px;
              background-color: #fcc;
              overflow: hidden;
              display: flex;
              justify-content: center;
              align-items: center;
              filter: brightness(70%) grayscale(100%);
              opacity: 0.5;
              transition: all 0.5s ease;
          }

          .bim-card img {
              width: calc(100% + 50px);
              height: calc(100% + 50px);
              object-fit: cover;
              will-change: transform;
              transition: transform 0.5s ease-out; /* 添加过渡效果 */
          }

          .bim-card:hover {
              filter: brightness(100%) grayscale(0%);
              opacity: 1;
          }

          .bim-row {
              display: flex;
              justify-content: center;
              align-items: center;
          }
          .bim-top{
              transform-origin: 50% 100%;
              perspective-origin: 50% 100%;
              perspective: 1000px;
          }

         .bim-middle{
              transform-origin: 50% 50%;
              perspective-origin: 50% 50%;
              perspective: 1000px;
          }
         .bim-bottom{
              transform-origin: 50% 0%;
              perspective-origin: 50% 0%;
              perspective: 1000px;
          }
         }
    </style>
  </head>
  <body>
    <div class="full">
      <div class="bim-fill">
        <div class="bim-overflow">
          <div class="view-port">
            <div class="bim-row bim-top">
              <div class="bim-card"></div>
              <div class="bim-card"></div>
              <div class="bim-card"></div>
              <div class="bim-card">
                <img src="./food-thomas-bosc-4.jpg" alt="" />
              </div>
            </div>
            <div class="bim-row bim-middle">
              <div class="bim-card"></div>
              <div class="bim-card"></div>
              <div class="bim-card">
                <img src="./food-thomas-bosc-4.jpg" alt="" />
              </div>
              <div class="bim-card"></div>
            </div>
            <div class="bim-row bim-bottom">
              <div class="bim-card"></div>
              <div class="bim-card"></div>
              <div class="bim-card"></div>
              <div class="bim-card"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      const viewPort = document.querySelector(".view-port");
      const viewFlow = document.querySelector(".bim-overflow");
      const cards = document.querySelectorAll(".bim-card");
      const images = document.querySelectorAll(".bim-card img");

      let isHovering = false;

      // 鼠标移动事件
      viewPort.addEventListener("mousemove", (e) => {
        isHovering = true;

        const sensitivity = 0.5; // 灵敏度系数
        const centerX = window.innerWidth / 2;
        const centerY = window.innerHeight / 2;

        // 计算偏移量
        const offsetX = (e.clientX - centerX) * sensitivity;
        const offsetY = (e.clientY - centerY) * sensitivity;

        // 更新 view-port 位置
        viewPort.style.transform = `translate3d(${-offsetX}px, ${-offsetY}px, 0)  scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)`;

        images.forEach((img, index) => {
          const imgOffsetX = offsetX * 0.2 * ((index % 4) - 1.5);
          const imgOffsetY = offsetY * 0.2 * ((index % 4) - 1.5);
          img.style.transform = `translate3d(${-imgOffsetX}px, ${-imgOffsetY}px, 0)  scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)`;
        });
      });

      // 鼠标离开事件
      viewPort.addEventListener("mouseleave", () => {
        isHovering = false;

        // 平滑复位
        viewPort.style.transition = "transform 0.5s ease-out";
        viewPort.style.transform = "translate3d(-0.128px, 0.1664px, 0)";

        images.forEach((img) => {
          img.style.transition = "transform 0.5s ease-out";
          img.style.transform = "translate3d(-0.128px, 0.1664px, 0)";
        });
      });
    </script>
  </body>
</html>
